<template>
    <!-- 服务日历的日历服务 -->
    <div>
        <el-radio-group v-model="radio" size="mini" @change="rads">
            <el-radio-button label="0">企业家数</el-radio-button>
            <el-radio-button label="1">服务项目</el-radio-button>
        </el-radio-group>
        <div>
            <!-- 企业家数 -->
            <div class="introduce" v-show="ente" style="margin-top:15px;margin-bottom: 15px;">
                当月共有
                <span style="color: blue">6</span>家企业预约成功，需要进行预防服务，现场签到<span style="color: blue">6</span>家，未服务<span
                    style="color: red">6</span>家，被拒绝<span style="color: blue">6</span>家，提交报告<span
                    style="color: blue">6</span>家，审核完成<span style="color: blue">6</span>家
            </div>
            <!-- 服务项目 -->
            <div class="introduce" v-show="proj" style="margin-top:15px;margin-bottom: 15px;">
                当月共有现场签到
                <span style="color: blue">16</span>次，未服务<span style="color: red">2</span>次，被拒绝<span
                    style="color: blue">0</span>次，提交报告<span style="color: blue">8</span>次，审核完成<span
                    style="color: blue">6</span>次
            </div>
            <div class="block">
                <div class="timeline">
                    <el-timeline v-model="time">
                        <el-timeline-item v-for="(item, index) in time_line" :key="index" :timestamp="item.time_data"
                            placement="top">
                            <el-card>
                                <h4>{{ item.head }}</h4>
                                <p>
                                    <a>{{ item.name }}</a>
                                </p>
                                <p>
                                    <a>{{ item.number }}</a>
                                </p>
                                <p>
                                    <a>{{ item.text }}</a>
                                </p>
                                <p>
                                    {{ item.time }}
                                </p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2018/4/3" placement="top">
                            <el-card>
                                <h4>更新 Github 模板</h4>
                                <p>王小虎 提交于 2018/4/3 20:46</p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2018/4/2" placement="top">
                            <el-card>
                                <h4>更新 Github 模板</h4>
                                <p>王小虎 提交于 2018/4/2 20:46</p>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </div>
                <!-- #region -->
                <!-- 日历组件 -->
                <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                <div class="calendar">
                    <el-calendar>
                        <template slot="dateCell" slot-scope="{date, data}">
                            <p :class="data.isSelected ? 'is-selected' : ''">
                                {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
                            </p>
                        </template>
                    </el-calendar>
                </div>

                <!-- #endregion -->
            </div>
            <!-- <Comprehensive_span></Comprehensive_span> -->
            <!-- #region -->
            <!--<el-row style="margin-top:15px">
                <el-col :span="3">
                    <el-select v-model="value1" filterable placeholder="请选择行政区域" clearable>
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select v-model="value2" filterable placeholder="请选择被保险人" clearable>
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select v-model="value3" filterable placeholder="请选择保单状态" clearable>
                        <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select v-model="value4" filterable placeholder="请选择服务状态" clearable>
                        <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>

            </el-row>-->
            <!-- #endregion -->

        </div>

    </div>
</template>

<script>
// import Comprehensive_span from './Comprehensive_span.vue';


export default {
    data() {
        return {
            time: new Date(),
            value1: "",
            value2: "",
            value3: "",
            value4: "",
            radio: "0",
            ente: true,
            proj: false,
            time_line: [
                {
                    time_data: "2022-04-05",
                    head: "待签出",
                    name: "宁波大丰混凝土有限公司",
                    number: "PZFS21330205000000000284",
                    text: "安全风险辨识，评估和安全评价",
                    time: "2022-04-05 13:14:15",

                },
                {
                    time_data: "2022-04-05",
                    head: "签出",
                    name: "宁波大丰混凝土有限公司",
                    number: "PZFS21330205000000000284",
                    text: "安全风险辨识，评估和安全评价",
                    time: "2022-04-05 13:14:15",

                },
                {
                    time_data: "2022-04-05",
                    head: "待签出",
                    name: "宁波大丰混凝土有限公司",
                    number: "PZFS21330205000000000284",
                    text: "安全风险辨识，评估和安全评价",
                    time: "2022-04-05 13:14:15",

                },
            ],
            options1: [
                {
                    value: "1",
                    label: "国家高新区",
                },
                {
                    value: "2",
                    label: "鄞州区",
                },
                {
                    value: "3",
                    label: "北仑区",
                },
                {
                    value: "4",
                    label: "江北区",
                },
                {
                    value: "5",
                    label: "大榭街道",
                },
            ],
            options2: [{ value: "", label: "" }],
            options3: [
                { value: "0", label: "在保" },
                { value: "1", label: "脱保" },
            ],
            options4: [
                { value: "0", label: "暂无" },
                { value: "1", label: "待审核" },
                { value: "2", label: "内审退件" },
                { value: "3", label: "待受理" },
                { value: "4", label: "受理退件" },
            ],
        };
    },
    created() {
    },
    mounted() {
        console.log("现在calendarservice页面");
    },
    watch: {},
    methods: {
        rads() {
            if (this.radio == "0") {
                this.ente = true;
                this.proj = false;
            }
            else {
                this.ente = false;
                this.proj = true;
            }
        },
    },
    // components: { Comprehensive_span }
}
</script>

<style>
.is-selected {
    color: #1989FA;
}

.block {
    display: flex;
}
</style>